<template>
    <div>
        <fieldset>
            <legend>类</legend>
            <div></div>
        </fieldset>
    </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, ref } from "vue";
import { createLogger } from "vuex";
export default defineComponent({
    name: "Home",
    setup() {
        class user {
            name: string;
            age: number;
            constructor(name: string, age?: number) {
                this.name = name;
                this.age = age!;
            }
            fun1(e: any) {
                console.log(this.name, this.age, e);
            }
        }
        let user1 = new user("你大爷", 111);
        user1.fun1("牛逼");

        // 继承-----------------------------------------
        console.log("继承-----------------------------------");
        class aaa {
            name: string;
            age: number;
            constructor(name: any, age?: any) {
                this.name = name;
                this.age = age;
            }
            fun1(e: any) {
                console.log("父类", this.name, this.age, e);
            }
        }
        class bbb extends aaa {
            job: any;
            constructor(name:any, age: any, job: any) {
                // super：调用父类中的构造函数
                super(name, age);
                this.job = job;
                console.log(this.name, this.age, this.job);
            }
            fun1(e: any) {
                // 调用父类方法
                super.fun1(e);
                console.log("子类", this.name, this.age, this.job, e);
            }
        }
        let bbb1 = new bbb("你大爷", 1234, "前端");
        bbb1.fun1("牛逼");

        // 多态：父类的引用指向子类的对象，不同类型的对象针对相同的方法，产生不同行为
        console.log("多态-------------------------------------------");
        class ccc {
            name: string;
            constructor(name: any) {
                this.name = name;
            }
            fun1(e: any) {
                console.log("父类ccc", this.name);
            }
        }
        class ddd extends ccc {
            constructor(name: any) {
                super(name);
                console.log("dddddddd");
            }
            fun1(e: any) {
                console.log("子类ddd", this.name, e);
            }
        }
        class eee extends ccc {
            constructor(name: any) {
                super(name);
            }
            fun1(e: any) {
                console.log("子类eee", this.name, e);
            }
        }
        let eee1: ccc = new ddd("你ddd大爷");
        eee1.fun1("你大爷eee");

        // 修饰符-------------------------------------------
        console.log("修饰符----------------------------------");
        class fff {
            // name: string;
            private age: number;
            readonly job: string;
            constructor(public name: string) {
                this.name = name;
                this.age = 23232;
                this.job = "前端";
            }
            // public，默认修饰符，公共的，类中任何位置都可以使用
            public fun1() {
                console.log(this.age);
                console.log(this.name, "public");
								this.fun2()
            }
            // private，私有的，外部、子类无法访问
            private fun2() {
                console.log(this.name, "滚", "private 私有");
            }
            // protected，受保护的，外部不能访问，子类可以访问
            protected fun3() {
                console.log(this.name, "protected 外部不能访问，子类可以访问");
            }
            fun4() {
                // this.job = "readonly，只能在构造函数 constructor 中修改";
                console.log(this.job);
            }
        }
        let fff1 = new fff("你fff大爷");
        fff1.fun1();
        // fff1.fun2();
        // console.log(fff1.age, "也是私有的");

        console.log(fff1.job);
        // fff1.job = "前端牛逼";
        console.log("readonly，不能再外部和普通方法中修改");
        fff1.fun4();

        class ggg extends fff {
            constructor(name: any) {
                super(name);
                console.log(this.name);
                // super(name, age);
                // console.log(this.name, this.age);
            }
            fun1() {
                super.fun3();
            }
        }
        let ggg1 = new ggg("你ggg大爷");
        // fff1.fun3();
        ggg1.fun1();
    },
});
</script>
